<template>
    <div style="height: 100%;width: 100%">
        <!--                输入博客附属信息-->
        <div>
            <el-card class="box-card">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-input
                                placeholder="请输入影资标题"
                                prefix-icon="el-icon-guide"
                                v-model="dialogBlogInfo.title">
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-input
                                prefix-icon="el-icon-s-custom"
                                :disabled="true"
                                v-model="dialogBlogInfo.userNickname">
                        </el-input>
                    </el-col>
                    <el-col :span="6" class="allowCommentStyle">

                    </el-col>
                    <el-col :span="6">
                        <el-select
                                v-model="dialogBlogInfo.labelIds"
                                collapse-tags
                                style="margin-left: 20px;"
                                placeholder="请选择">
                            <el-option
                                    v-for="label in allLabels"
                                    :key="label.value"
                                    :label="label.label"
                                    :value="label.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>

            </el-card>
        </div>
        <!--                输入博客主体-->
        <div class="blogContentStyle">
            <mavon-editor ref="md"
                          v-model="dialogBlogInfo.content"
                          :ishljs="true"
                          :toolbarsFlag="true"
                          @imgAdd="imgAdd"
                          class="mavonEditorDialog"/>
        </div>
        <!--                底部栏-->
        <div>
            <el-card class="box-card" style="text-align: center">
                <el-button type="primary" @click="addBlog">确 定</el-button>
            </el-card>

        </div>

    </div>

</template>

<script>
    import axios from "axios";
    import {constants} from "@/common/constants";
    import {mavonEditor} from "mavon-editor";
    import 'mavon-editor/dist/css/index.css'            //引入markdown编辑器相关样式


    export default {
        name: "SubmitFilmSource",
        components:{
            mavonEditor,
        },
        data(){
            return{
                dialogBlogInfo:{
                    auditStatue:0,
                    userId:localStorage.getItem('user')!=null?JSON.parse(localStorage.getItem('user')).id:"",
                    userNickname:localStorage.getItem('user')!=null?JSON.parse(localStorage.getItem('user')).nickname:"",
                },
                allLabels: [],                 //所有的标签
                allLabelOptions:[],              //所有的标签选项（增加了0：默认全部查询）
            }
        },
        created() {
            this.queryAllLabels();
        },
        methods:{
            //初始化界面信息
            initView(){
                  this.dialogBlogInfo={
                      auditStatue:0,
                    userId:localStorage.getItem('user')!=null?JSON.parse(localStorage.getItem('user')).id:"",
                    userNickname:localStorage.getItem('user')!=null?JSON.parse(localStorage.getItem('user')).nickname:"",
                };
            },
            //查询所有的标签信息
            queryAllLabels(){
                this.request.get("/index/label/queryAllLabels",{
                    params:{}
                }).then(res=>{
                    if (res.code=="200"){
                        this.allLabels=res.data.map(v=>({value:v.id,label:v.content}));
                        this.allLabelOptions=this.allLabels;
                        this.allLabelOptions.unshift({value:0,label:'默认'})
                    }else if(res.code=="301"){
                        this.allLabels=[];
                        this.$message({
                            message: res.data,
                            type: 'warning'
                        });
                    }
                })
            },
            //上传博客内容中需要添加的博客图片
            imgAdd(pos, $file) {
                let $vm = this.$refs.md;
                // 第一步.将图片上传到服务器.
                const formData = new FormData();
                formData.append('file', $file);
                axios({
                    url: 'http://'+constants.server+':'+constants.port+'/index/attach/upload',
                    method: 'post',
                    data: formData,
                    headers: {'Content-Type': 'multipart/form-data',
                        'token': (localStorage.getItem('user')!=null)?JSON.parse(localStorage.getItem('user')).token:null},
                }).then(res => {
                    if (res.data.code=='200'){
                        // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
                        /**
                         * $vm 指为mavonEditor实例，可以通过如下两种方式获取
                         * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，
                         * `$vm`为`mavonEditor`
                         * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，
                         * `$vm`为 `this.$refs.md`
                         */
                        $vm.$img2Url(pos, res.data.data);
                        this.$message({
                            message: "上传成功",
                            type: 'success'
                        });
                    }else{
                        this.$message({
                            message: "上传图片失败",
                            type: 'error'
                        });
                    }

                });
            },
            //新增影资信息
            addBlog(){
                this.request.post("/index/blog/addBlog",this.dialogBlogInfo).then(res=>{
                    if (res.code=='200'){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                    }else {
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
                this.initView();
            },
        }

    }
</script>

<style scoped>


    .mavonEditorDialog{
        max-height: 600px;
        min-height: 600px;
    }

    .blogContentStyle{
        padding: 10px 0px ;
    }

</style>